<template>
  <div class="block">
    <div class="security_set">
      <h4>新消息通知</h4>
      <ul class="revise">
        <li class="revise_item">
          <div class="revise_item_meta">
            <h4>账户密码</h4>
            <div class="revise_item_meta_desc">
              其他用户的消息将以站内信的形式通知
            </div>
          </div>
          <div class="revise_item_action">
            <el-switch v-model="noticelist.userpass"> </el-switch>
          </div>
        </li>
        <li class="revise_item">
          <div class="revise_item_meta">
            <h4>系统消息</h4>
            <div class="revise_item_meta_desc">
              系统消息将以站内信的形式通知
            </div>
          </div>
          <div class="revise_item_action">
            <el-switch v-model="noticelist.sysinfo"> </el-switch>
          </div>
        </li>
        <li class="revise_item">
          <div class="revise_item_meta">
            <h4>待办任务</h4>
            <div class="revise_item_meta_desc">
              待办任务将以站内信的形式通知
            </div>
          </div>
          <div class="revise_item_action">
            <el-switch v-model="noticelist.todo"> </el-switch>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      noticelist: {
        userpass: "",
        sysinfo: "",
        todo: "",
      },
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  width: 100%;
  display: flex;
  .security_set {
    width: 100%;
    padding: 0 50px 20px;
    > h4 {
      font-size: 18px;
      font-weight: normal;
      // margin: 0;
      margin: 10px 0 30px;
    }
    .revise {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      .revise_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 10px;
        .revise_item_meta {
          h4 {
            margin: 0;
            padding: 0;
            margin-bottom: 4px;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            line-height: 1.6;
            font-weight: normal;
          }
          .revise_item_meta_desc {
            color: rgba(0, 0, 0, 0.45);
            font-size: 14px;
            line-height: 1.6;
          }
        }
      }
    }
  }
}
</style>